<template>
  <view class="play main-box feat-grid">
    <view class="com-advert">
      <uv-swiper height="280" @click="handleSwiper" :list="renderData.cmsBanner"></uv-swiper>
    </view>

    <view v-if="filterQualityList?.length>=1" class="com-article-title mt30">
      <text class="com-article-title-left">精品剧本模块</text>
      <text @click="jump('/pages/play/qualityList')" class="com-article-title-right">更多</text>
    </view>

    <!--精品剧本列表-->
    <comScriptQuality class="hide" v-show="filterQualityList?.length>=1" :list="filterQualityList" :main="true"></comScriptQuality>

    <!--榜单-->
    <view v-if="store.rankList?.length>=1" class="com-article-title mt50">
      <text class="com-article-title-left">榜单模块</text>
      <text @click="jump('/pages/play/rankList',true)" class="com-article-title-right">更多</text>
    </view>

    <view v-if="store.rankList?.length>=1" class="play-rank" @click="jump('/pages/play/rankList',true)">
      <view class="play-rank-title">{{ store.tabList[store.rankCurrent]?.name }}</view>
      <view v-show="index<=2" v-for="(item,index) in store.rankList" class="play-rank-list fx-row-s">
        <view class="play-rank-list-index">{{ index + 1 }}</view>
        <view class="play-rank-list-img main-bg"
              :style="{'background-image': 'url('+ item.ScriptBasic?.cover+')'}"
        ></view>
        <view class="play-rank-list-name com-overflow">{{ item.ScriptBasic?.title }}</view>
        <view class="play-rank-list-author com-overflow">作者：{{ item.ScriptBasic.user?.nickname }}</view>
        <view class="play-rank-list-score">{{filterRate(item.Rate)}}</view>
      </view>
    </view>

    <!--专题-->
    <view v-if="store.specialTabList?.length>=1" class="com-article-title mt50">
      <text class="com-article-title-left">专题模块</text>
      <text @click="jump('/pages/play/specialList',true)" class="com-article-title-right">更多</text>
    </view>

    <view v-if="store.specialTabList?.length>=1" class="play-special fx-row-b">
      <view v-for="(item,index) in store.specialTabList" class="play-special-list" :key="index"
            @click="handleGoToSpecial(item)" v-show="index<3"
      >
        <view class="play-special-list-box main-bg" :style="{'background-image': 'url('+ domainImage(item.cover) +')'}"></view>
        <view class="play-special-list-description com-overflow">{{ item.title }}</view>
      </view>
    </view>


    <!--测本-->
    <view class="com-article-title mt50">
      <text class="com-article-title-left">在测剧本</text>
      <uv-icon @click="handleSort" custom-prefix="custom-icon" :color="color.colorTextB" size="45" name="shaixuan"></uv-icon>
    </view>

    <view class="play-tag fx-row-s">

      <uv-tag v-show="renderData.tagObj.search.val" class="play-tag-list" mode="dark" :closeable="true" shape="circle"
              :text="renderData.tagObj.search.val"
              :color="color.colorTextB" bg-color="rgb(237,237,237,.8)" @close="handleTagClose('search')"
      />
      <uv-tag v-show="renderData.tagObj.personObj.val" class="play-tag-list" mode="dark" :closeable="true" shape="circle"
              :text="renderData.tagObj.personObj.name"
              :color="color.colorTextB" bg-color="rgb(237,237,237,.8)" @close="handleTagClose('personObj')"
      />
      <uv-tag v-show="renderData.tagObj.timeObj.val" class="play-tag-list" mode="dark" :closeable="true" shape="circle"
              :text="renderData.tagObj.timeObj.name"
              :color="color.colorTextB" bg-color="rgb(237,237,237,.8)" @close="handleTagClose('timeObj')"
      />
<!--      <uv-tag v-if="renderData.tagObj.yearsObj.val" class="play-tag-list" mode="dark" :closeable="true" shape="circle"
              :text="renderData.tagObj.yearsObj.name"
              :color="color.colorTextB" bg-color="rgb(237,237,237,.8)" @close="handleTagClose('yearsObj')"
      />-->
      <uv-tag v-for="(item,index) in renderData.tagObj.yearsObj" v-show="item.val" :key="index"
              class="play-tag-list" mode="dark" :closeable="true" shape="circle"
              :text="item.name"
              :color="color.colorTextB" bg-color="rgb(237,237,237,.8)" @close="handleTagCloseMore(index,'yearsObj')"
      />
      <uv-tag v-for="(item,index) in renderData.tagObj.typeObj" v-show="item.val" :key="index"
              class="play-tag-list" mode="dark" :closeable="true" shape="circle"
              :text="item.name"
              :color="color.colorTextB" bg-color="rgb(237,237,237,.8)" @close="handleTagCloseMore(index,'typeObj')"
      />
    </view>

    <view class="play-popup">
      <uv-popup :mask="true" v-model="isDisplayFilter" border-radius="20" mode="bottom" height="auto">
        <comFilterList :formState="renderData.tagObj" :fun="handleSelFilter"></comFilterList>
      </uv-popup>
    </view>
    <view class="play-test">
      <!--后端数据结构不一致组件内部处理 当前结构类型isDetail-->
      <comScriptList :list="renderData.testList" :isDetail="true"></comScriptList>

      <view class="mt50" v-if="renderData.testList?.length<=0">
        <noData text="暂未有相关剧本"></noData>
      </view>
    </view>

    <playIng></playIng>
  </view>
</template>
<script setup>
import {computed, ref,reactive} from "vue";
import { domainImage,jump } from '@/utils/index'
import { header,color,mine } from '@/enums/constants';
import { onReachBottom,onLoad,onShow,onHide } from "@dcloudio/uni-app";
import qs from "qs";
import playApi from "@/apis/play";
import creatorApi from "@/apis/creator";
import comFilterList from './comFilter'
import comScriptList from '@/components/com-script/index'
import comScriptQuality from '@/components/com-script-quality/index'
import noData from '@/components/com-nodata';
import { userStore,playStore,playingStore } from "@/stores";
const store = playStore();
const storePlayIng = playingStore();
const storeUser = userStore();
const {width , height} = {...header.little};
const isDisplayFilter = ref(false);
const renderData = reactive({
  cmsBanner:[],
  pageIndex:1,
  testList:[],
  tagObj:{
    search: {val:''},
    personObj:{name:'不限',val:'',currentIndex:0},
    timeObj:{name:'全部',val:'',currentIndex:0},
    yearsObj:[
      {name:'全部', val:''},
    ],
    typeObj:[
      {name:'全部', val:''},
    ]
  },
})

//获取当前精品列表的一条数据
const filterQualityList = computed(()=>{
  console.log(store.qualityList)
  if(store.qualityList?.length>=1){
    return [store.qualityList[0]]
  }
  return false;
})


//点击筛选
const handleSort = ()=>{
  isDisplayFilter.value = !isDisplayFilter.value;
}

//选择标签点击确定
const handleSelFilter = (type,data)=>{
  isDisplayFilter.value = false;
  if(type == 'confirm'){
    console.log('con')
    renderData.tagObj = data;
    handleGetTestList('sort');
  }
}

//删除标签
const handleTagClose = (key)=>{
  renderData.tagObj[key].val="";
  renderData.tagObj[key].currentIndex = 0;
  if(key == 'personObj'){renderData.tagObj[key].name = '不限'}
  if(key == 'timeObj'){renderData.tagObj[key].name='全部'}
  handleGetTestList('sort');
}
//删除类型标签
const handleTagCloseMore = (index,type)=>{
  renderData.tagObj[type].splice(index,1);
  if(renderData.tagObj[type].length<=0){
    renderData.tagObj[type].push({name:'全部', val:''});
  }
  handleGetTestList('sort');
}


//过滤参数
const filterPara = (str)=>{
  if(!str){
    return [0,0]
  }else{
    return str.split('-');
  }
}

//获取测试剧本列表
const handleGetTestList = (type)=>{
  if(type == 'sort'){
    renderData.testList = [];
    renderData.pageIndex = 1;
  }
  let arrAge = [];
  renderData.tagObj.yearsObj.forEach((item)=>{
    if(item.val){
      arrAge.push(item.name);
    }
  })
  let arrTag = [];
  renderData.tagObj.typeObj.forEach((item)=>{
    if(item.val){
      arrTag.push(item.name);
    }
  })
  let para={
    pageIndex:renderData.pageIndex,
    pageSize:mine.pageSize,

    query:renderData.tagObj.search.val,
    playerNumberMax:Number(filterPara(renderData.tagObj.personObj.val)[1]),
    playerNumberMin:Number(filterPara(renderData.tagObj.personObj.val)[0]),
    timeMax:Number(filterPara(renderData.tagObj.timeObj.val)[1]),
    timeMin:Number(filterPara(renderData.tagObj.timeObj.val)[0]),

    age:arrAge,
    tag:arrTag,
  }

  playApi.getTestList(para).then(res=>{
    if(res.code == 'SUCCESS'){
      if(type == 'scroll' && res.data?.length<=0){
        uni.showToast({
          icon:'none',
          title:'暂无数据了!'
        })
      }
      if(res.data?.length>=1){
        renderData.testList = renderData.testList.concat(res.data);
        renderData.pageIndex++;
      }
    }
  })
}

//跳转专题详情列表
const handleGoToSpecial = (item)=>{

  let  queryString = qs.stringify({
    specialId:item.id,
    cover:item.cover,
    title:item.title
  });

  //let para = encodeURIComponent('id='+ item.id + '&cover='+ item.cover);
  jump('/pages/play/specialDetail?' + queryString,true);
}

//获取banner
const handleGetCmsBanner = ()=>{
  let para = {
    position:'miniappScriptHome'
  }
  creatorApi.getCmsBanner(para).then(res=>{
    if(res.code == 'SUCCESS'){
      let arrImg = res.data.map((item)=>{
        return {
          image:item.content,
          url:item.url
        };
      })
      renderData.cmsBanner = arrImg;
    }
  })
}

//处理评分
const filterRate = computed(()=>{
  return (rate)=>{
    if(rate){
      return rate.toFixed(1)
    }else{
      return ''
    }
  }
})

const handleSwiper = (index)=>{
  let link = renderData.cmsBanner[index]?.url;
  jump(link,true)
}



onLoad(()=>{
  //测试列表
  handleGetTestList();
});

onReachBottom(()=>{
  if(renderData.testList.length<8){return}
  handleGetTestList('scroll');
})

onShow(() => {

  handleGetCmsBanner();
  //精品列表
  //store.clearQualityList();
  //store.handleGetQualityList();
  //获取榜单标签（后期加）
  //store.handleGetRankTabList();
  //获取榜单
  store.clearRankList();
  store.handleGetRankList({type:'reset',index:0});
  //专题Tab列表
  store.clearSpecialTabList()
  store.handleGetSpecialTabList('reset')

  if(storeUser.token){
    storePlayIng.startLoop();
  }
});

</script>

<style lang="scss" scoped>
.play {
  background-color:$main-j;
  &:deep(.script-item){
    @include main-line2;
    color:$main-text-a;
    box-shadow: 0px 1px 1px 0px $main-text-d;
    border-radius: 15rpx;
  }
  .play-have{

  }
  //榜单样式
  &-rank{
    @include main-line2;
    padding:20rpx;
    border-radius: 20rpx;
    background: linear-gradient(to right,#fff, #eaedf3);
    &-title{color:$main-a;}
    &-list{
      @include main-line2;
      border-radius:10rpx;
      padding:5rpx;
      background:linear-gradient(to right,#fff, #f1f4f6);
      &-index{
        width:4%;
        color:$main-b;
        text-align: center;
      }
      &-img{
        margin: 0 20rpx;
        width: 35rpx;
        height: 50rpx;
      }
      &-name{
        width: 36%;
        padding:0 10rpx 0 20rpx;
      }
      &-author{
        width: 36%;
        padding:0 10rpx;
        @include main-text5;
      }
      &-score{ @include main-text4;width:10%;text-align:center;color:$main-i;};
    }
  }

  //专题样式
  .play-special{
    @include main-line3;
    align-items: flex-start;
    &-list{
      padding:0 10rpx;
      flex-grow: 1;
      min-width: 230rpx;
      &-box{width: 100%;height:200rpx;border-radius: 10rpx;background-color: $main-text-d;}
      &-description{
        width: 200rpx;
        margin: 0 auto;
        color:$main-a;
        padding:5rpx 0 5rpx 5rpx;
        text-align: center;
        @include main-text3;
      }
    }
  }
  //筛选标签
  .play-tag{
    @include main-line2;
    &-list{
      font-size: 28rpx !important;
      border-radius:10rpx;
      margin:10rpx 10rpx;
    }
  }
  .play-popup{

  }

  .play-test{
    min-height: 300rpx;
    &-icon{
      color:$main-text-b;
    }
  }



}
</style>
